import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import {
    AppstoreOutline,
    UserOutline,
    TruckOutline,
    ContentOutline,
    CalendarOutline
}
    from 'antd-mobile-icons'
import { TabBar } from 'antd-mobile'
class MyTabbar extends Component {
    state = {
        tabbar: [
            {
                key: '/index/home',
                icon: <CalendarOutline />,
                title: "店铺"
            },
            {
                key: '/index/cate',
                icon: <AppstoreOutline />,
                title: "分类",
            },
            {
                key: '/index/goods',
                icon: <ContentOutline />,
                title: "全部商品",
            },
            {
                key: '/index/shopcart',
                icon: <TruckOutline />,
                title: "购物车",
            },
            {
                key: '/index/mine',
                icon: <UserOutline />,
                title: "个人中心",
            },
        ]
    }
    handleChange(key){
        this.props.history.push(key)
    }
    render() {
        return (
            <div className='mytabbar'>
                <TabBar onChange={(key)=>{this.handleChange(key)}}>
                    {
                        this.state.tabbar.map(item => {
                            return (
                                <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                            )
                        })
                    }
                </TabBar>

                {/* {
                    this.state.tabbar.map((item,index)=>{
                        return (
                            <div className="tab" key={index}>
                                <img src={item.pic} alt="" />
                                <div className="name">{item.name}</div>
                            </div>
                        )
                    })
                } */}
            </div>
        );
    }
}

export default withRouter(MyTabbar);